<template>

  <div>

    <el-dialog
      :visible="isShowDialog"
      guanbi="false"
      @close="isNO"
    >
      <span slot="title">
        <span>{{ addList.id?'编辑':'新增' }}</span>
      </span>
      <el-form ref="getAdddialog" :model="addList" :rules="rules">

        <el-form-item label="经纪">
          <el-select v-model="Addstate">
            <!-- 遍历 -->
            <el-option
              v-for="item in manageList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="姓名" prop="name">
          <el-input v-model="addList.name" />
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addList.email" />
        </el-form-item>

        <el-form-item label="电话" prop="phone">
          <el-input v-model="addList.phone" />
        </el-form-item>

        <el-form-item label="微信" prop="wechat">
          <el-input v-model="addList.wechat" />
        </el-form-item>

        <el-form-item label="描述" prop="desc">
          <el-input v-model="addList.desc" type="textarea" />
        </el-form-item>

      </el-form>
      <span>  <strong>封面</strong></span>
      <!--
 必传
action图片上传地址
list-type="picture-card" 设置照片墙样式

移除图片  上传成功 图片被修改 图片校验
on-remove on-success  on-change  before-upload
-->

      <el-upload
        action="#"
        list-type="picture-card"
        :file-list="fileList"
        :class="{ disable: fileList.length > 0 }"
        :on-remove="onRemove"
        :on-change="onChange"
        :http-request="upload"
        :before-upload="beforeUpload"
      >
        <i class="el-icon-plus" />
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isNO">取 消</el-button>
        <el-button type="primary" @click="isOK">确 定</el-button>
      </span>

    </el-dialog>

  </div>
</template>

<script>
// 添加客户
import { addCustomerFn, editor } from '@/api/user'
// 引入
import COS from 'cos-js-sdk-v5'
// 创造实例
const cos = new COS({
  SecretId: 'AKIDKTN0NTIq89tMYVBbkcEafU2JJ2VhdIgn',
  SecretKey: 'tVrwlTt3wZw2sRjlW0C7l8F5ex0mIXVD'
})
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    },
    manageList: {
      type: Array,
      required: true
    }

  },
  data() {
    return {
      Addstate: {},
      addList: {
        image: '',
        name: '',
        email: '',
        phone: '',
        desc: '',
        wechat: ''
        // agent: ''
      },
      fileList: [],
      // 接口数组
      tableData: [],
      // 校验规则
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入描述', trigger: 'blur' },
          { max: 30, message: '请输入30以内的描述字数', trigger: 'blur' }
        ],
        wechat: [{ required: true, message: '请输入微信', trigger: 'blur' }]
      }
    }
  },

  methods: {

    async isOK() {
      // 1、点击确定的时候通知父组件发送 (添加) 请求
      // 2、在父组件请求成功后 调用页面接口刷新数据
      // 3、将 this.isShowDialogRole = false 改为 false 即可
      // 有id编辑

      if (this.addList.id) {
        // console.log(127, this.addList.id)
        await editor(this.addList)
        // 没id新增
      } else {
        console.log(66, this.Addstate)
        let temp = {}
        this.manageList.forEach(item => {
          if (item.name === this.Addstate) {
            temp = item
            console.log(temp)
          }
        })
        await addCustomerFn({
          ...this.addList,
          image: this.fileList[0].url,
          agent: temp

        })
      }
      // 发请求添加
      // 关闭弹框
      // this.isShowDialog = false
      this.$emit('update:isShowDialog', false)

      // 通知用户添加成功
      this.$message.success('操作成功')
      // 加载页面
      this.$emit('Refresh')

      // 清空图片
      this.fileList = []
    },
    isNO() {
      // 子传父，关闭弹框
      this.$emit('cloaDialog')
      // this.$emit('update:isShowDialog', false)
      // 清空表单
      this.addList = {}
      // 清空图片
      this.fileList = []
      // 清空校验
      this.$refs.getAdddialog.resetFields()
    },
    // 图片移除
    onRemove(file, newfileLisr) {
      this.fileList = newfileLisr
    },
    // 图片被修改
    onChange(lile, FileList) {
      this.fileList = FileList
    },
    // 图片校验
    beforeUpload(file) {
      // 设置图片类型白名单
      const warnList = ['image/jpeg', 'image/jpg', 'image/gif', 'image/png']
      // 不包含到白名单就返回false
      if (!warnList.includes(file.type)) {
        // 校验规则
        this.$message.warning('暂时只支持image/jpeg image/jpg 类型')
        return false
      }
    },
    // 图片上传成功
    upload(res) {
      console.log(res)
      cos.putObject(
        {
          Bucket: 'renzi69-1308572211' /* 填入您自己的存储桶，必须字段 */,
          Region: 'ap-nanjing' /* 存储桶所在地域，例如ap-beijing，必须字段 */,
          Key: res.file
            .name /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */,
          StorageClass: 'STANDARD',
          Body: res.file, // 上传文件对象
          onProgress: function(progressData) {
            console.log(JSON.stringify(progressData))
          }

        },
        (err, data) => {
          console.log(err || data)
          // 这是腾讯云存储桶封装的上传结束后的回调，我们需要手动返回上传成功的图片
          console.log(data)
          this.fileList[0].url = 'http://' + data.Location
          console.log(this.fileList[0].url)
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.disable {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
</style>
